<template>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avater_box">
                <img src="../assets//Vue.jpg" alt="">
            </div>

            <!-- 
                登录表单区域
                （1）el-form 中用 :model 绑定登录表单数据，el-input 中用 v-model 绑定 :model 中绑定的具体的对象属性，从而实现表单数据的双向绑定
                （2）el-form 中用 :rules 绑定绑定规则，el-form-item 中用 prop 使用具体验证规则
                （3）ref 设置对象的引用（实例对象）
                    （1）通过对标签属性设置 ref 便可以获取到 该标签的 实例对象（引用对象），然后通过在js中通过 this.$refs 获取设置的 ref 的属性名（这一步骤就是获取标签的实例对象），然后通过这个实例对象操作方法                
                    （2）登录表单'预验证'，输入数据后,先进行验证，通过则再发起请求
            -->
            <el-form
                label-width="0px"
                class="login_form" 
                :model="loginForm"
                :rules="loginFormRules"
                ref="loginFormRef"
            >            
                <!-- 用户名 -->
                <el-form-item
                    prop="username"
                >
                    <!-- 添加属性的方式添加字体图标 -->
                    <el-input 
                        prefix-icon="iconfont icon-user"
                        v-model="loginForm.username"                        
                    >
                    </el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item
                    prop="password"
                >                    
                    <el-input
                        v-model="loginForm.password"
                        type="password"
                    >               
                        <!-- slot方式添加字体图标 -->         
                        <i slot="prefix" class="iconfont icon-3702mima"></i>
                    </el-input>
                </el-form-item>

                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login" >登录</el-button>
                    <el-button type="info" @click="resetLoginForm">重置</el-button>
                    <el-button type="info">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //这个是登录表单的数据绑定对象
            loginForm: {
                username: 'admin',
                password: '123456',
            },  
            // 表单验证规则（用户名、密码）
            loginFormRules: {
                username: [
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入正确的密码', trigger: 'blur' },
                    { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
                ]
            }
        }
    },

    // mounted() {        
    //     document.addEventListener('keydown', (e) => {
    //         if (e.keyCode === 'enter') {
    //             this.login()
    //         }
    //     });
    // },        

    methods: {            
        // 重置按钮事件,将更改的状态进行清空，比如表单验证信息等
        resetLoginForm() {    
            this.$refs.loginFormRef.resetFields()
        },

        // 登录按钮表单预验证：成功返回 true ,失败返回 false,
        // 此处注意若是直接将下方返回的数据直接打印，则展示的数据是 promise 对象，一般这种情况下都通过 async、await 进行处理则直接返回数据对象
        login() {
            this.$refs.loginFormRef.validate(async (val) => {
                // 请求成功才执行下方代码
                if (!val) return;                      
                let { data: res } = await this.$http.post('login', this.loginForm)

                // 校验登录是否失败
                if (res.meta.status != 200) {
                    return this.$message({type:'error',message: '用户信息错误'})
                } else {
                    // console.log('登录成功',res)   //ceshi
                    this.$message({ type: 'success', message: '登录成功' })                    
                }

                /**
                 * 保存 token
                 * 将 token 保存在 sessionStorage 中，
                 * 为什么保存在 sessionStorage 而不是 localStorage 中？
                 * 因为 sessionStorage 为会话期间的存储，localStorage 为持久化的存储。而 token 只在当前网站打开期间生效，所以使用 sessionStorage
                 * 注意：此处注意，本次练习中并没有使用 sessionStorage 因为在其在获取 使用 token 时出现问题，并且在 请求头 中并没有 Authorization 字段，若是改为 localStorage 则既可以直接拿到 token 而且在请求头中也可以显示 Authorization 字段
                */
                window.localStorage.setItem("token", res.data.token)
                this.$router.push('/home')                
            })            
        },        
    }    
}
</script>

<style lang="less" scoped>
    .login_container {
        background-color: #2b4b6b;
        height: 100%;
    }
    .login_box {
        width: 450px;
        height: 300px;
        background-color: #fff;
        background-repeat: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

        .avater_box {
            height: 130px;
            width: 130px; 
            border: 2px solid #eee;           
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0  10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%); //横向纵向移动距离,根据当前盒子的高宽进行移动百分比
            img {
                width: 100%;                
                height: 100%;
                border-radius: 50%;
                background-color: red;
            }
        }
    }

    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .btns {
        display: flex;
        justify-content: center; // 内容自适应：上下居中
        align-items: center; // 子项对齐方式：左右居中
    }
</style>  